<template>
	<view class="wrap">
		<view style="position: sticky; top: 0;z-index: 2;">
			<view class='box-title'>
				<view v-for="(item,index) in tabs":key= 'index' class='title' :class="selectIndex==index?'title1':''" @click='selectText(index)'>
					<text>{{item.value}}</text>
				</view>
			</view>
			<!-- <view class="tab"><lrTabs :tabs="tabs" @change="change"></lrTabs></view> -->
			<view v-if="couponList.length > 0">
				<view v-for="(item, index) in couponList" :key="item.businessId">
						<coupon-cell
						:businessId="item.businessId"
						:discountAmount="item.money"
						:rangInfo="item.conditionMoney"
						:activityType="item.couponName"
						:durationDate="item.useTime"
						:couponType="item.businessName"
						:storeRang = "item.applicableUnit"
						:useNotice="item.useNotice"
				        :businessType="1"
						:memberCouponStatus="item.memberCouponStatus"
						:isReceive="couponBusiness == 0 ? 1 : 2"
						:isTurn="item.isTurn"
						:memberId="item.memberId"
						:useTypeName="item.useTypeName"
						:applicableUnitType="item.applicableUnitType"
						:objData="item"
						@shareCoupon="shareCoupon"
						@getCoupon="getCoupon"
						></coupon-cell>
				</view>
				<u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
			</view>
		</view>
		
		<u-empty v-if="couponList.length == 0" mode="coupon" marginTop="160"></u-empty>
	</view>
</template>

<script>
	import lrTabs from '../../components/activity/lr-tabs.vue'
	import couponCell from '../../components/coupon/coupon-cell.vue'
	import {apiMyCouponList} from '../../common/api.js'
	export default {
		components: {
			lrTabs,
			couponCell
		},
		data() {
			return {
				tabs: [
					{
						stuta:0,
						code : '',
						value : '待使用'
					},
					{
						code : '',
						stuta:1,
						value : '已使用'
					},
					{
						code : '',
						stuta:2,
						value : '已过期'
					},
					// {
					// 	code : '',
					// 	stuta:3,
					// 	value : '已赠送'
					// }
				],
				
				pageNo: 1,
				couponBusiness : 0,
				loadingStatus: 'loading',
				// couponList: [{businessId:"1",money:'2',conditionMoney:'3',couponName:"5",useTime:"3",businessName:'2342',applicableUnit:"124",
				// useNotice:"234",memberCouponStatus:'234',isTurn:1,memberId:'2',useTypeName:'3',applicableUnitType:'4'},],
				couponList: [],
				memberId: '',
				selectIndex:0,
			}
		},
		onLoad(op) {
			getApp().globalData.tempDeptId = op.deptId;
			if(!uni.$u.test.isEmpty(op.deptId)){
				this.$store.commit('user/savedeptId', op.deptId);
			}
			
			// this.getCouponList();
		},
		onShow() {
			this.pageNo = 1;
			this.getCouponList();
		},
		methods: {
			doSearch(value) {
			    this.pageNo = 1;
			    this.getCouponList();
			},
			// tab栏切换
			selectText(index){
				this.selectIndex = index
				let item = this.tabs[index];
				this.couponBusiness = item.stuta;
				this.pageNo = 1;
				this.getCouponList();
			},
			getCouponList() {
				apiMyCouponList({
					pageNo : this.pageNo,
					memberCouponStatus : this.couponBusiness,
					memberNo : this.$store.state.user.userInfo.customerId
				}).then(res => {
					
					if (this.pageNo == 1) {
						this.couponList = [];
						this.pageNo++;
						// uni.stopPullDownRefresh();
					
						this.loadingStatus = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNo++;
					
							this.loadingStatus = 'loadmore';
						} else {
					
							this.loadingStatus = 'nomore';
						}
					}
					
					if (!uni.$u.test.isEmpty(res)) {
						
						this.couponList = this.couponList.concat(res);
					}
				})
			},
			
			change(index) {
				let item = this.tabs[index];
				this.couponBusiness = item.stuta;
				this.pageNo = 1;
				this.getCouponList();
			},
			
			clickloadmore() {
				this.getCouponList();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},
			getCoupon() {
				this.pageNo = 1;
				this.getCouponList();
			}
		},
		
		onPullDownRefresh() {
			this.pageNo = 1;
			this.getCouponList();
		},
	
		onReachBottom() {
			this.getCouponList();
			this.showloading = true;
			this.loadingStatus = 'loading';
		},
		
			
		shareCoupon(obj) {
			this.memberId = obj.memberId;
		},
		
		onShareAppMessage(res) {
		   var eData = res.target.dataset;
		   return {
		    title : '朋友送你优惠券快来领取了!!!!',
		    path:'/pages/coupon/coupon-detail?memberId=' + eData.memberid + '&type='+ '1' + '&turnMemberNo=' + this.$store.state.user.userInfo.customerId + '&deptId='+this.$store.state.user.deptId + '&customerId=' + this.$store.state.user.userInfo.customerId
		   }
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		@include flex(column);
		height: calc(100vh - var(--window-top));
		padding: 32upx;
		.box-title{
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 24upx;
			background-color: #FFFFFF; 
			border-radius: 8upx;
			.title{
				text-align: center;
				text{
					width:200upx;
					font-size: 28upx;
					color:#000000;
				}
			}
			.title1{
				background-color: #173B42 ;
				color:#ffffff;
				border-radius: 8upx;
				text{
					color:#ffffff;
				}
			}
		} 
	}
	.tab {
		position: sticky;
		top: 0;
		background-color: #F5F5F5;
		z-index: 2;
	}
	.title {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: $black33;
		margin-left: 20upx;
	}
	
</style>
